<template>
  <footer class="footer">
    
    <div class="foottop">
      <div class="layer clearfix">
        <router-link :to="{path:'/applyToList', query: {typeCode: 'aboutUs'}}" class="footlink">{{$t('l.add_58')}}</router-link>
        <router-link
          :to="{path:'/applyToList', query: {typeCode: 'termsOfService'}}"
          class="footlink"
        >{{$t('l.add_59')}}</router-link>
        <router-link
          :to="{path:'/applyToList', query: {typeCode: 'privacyPolicy'}}"
          class="footlink"
        >{{$t('l.add_60')}}</router-link>
        <router-link :to="{path:'/applyToList', query: {typeCode: 'feeRate'}}" class="footlink">{{$t('l.add_61')}}</router-link>
        <router-link
          :to="{path:'/applyToList', query: {typeCode: 'contactUs'}}"
          class="footlink"
        >{{$t('l.add_62')}}</router-link>
        <a class="footlink" @click="linkApiDoc">{{$t('l.add_63')}}</a>
        <router-link
          :to="{path:'/applyToList', query: {typeCode: 'applyToList'}}"
          class="footlink"
        >{{$t('l.add_64')}}</router-link>
        <router-link :to="{path:'/announcement', query: {type: 1}}" class="footlink">{{$t('l.other_a_4')}}</router-link>
        <!--<div class="footbtn">
          {{$t('l.add_65')}}
          <div class="joinus">
            <h2>{{$t('l.add_66')}}</h2>
            <p>{{$t('l.add_67')}}:</p>

          </div>
        </div>-->
        <div class="footbtn">
          {{$t('l.add_72')}}
          <div class="wechat">
            <img src="../assets/images/wechat.png" width="114px" height="114px">
          </div>
        </div>
        <div class="footbtn">
          {{$t('l.add_73')}}
          <div class="downqrcode" ref="downqrcode" id="downqrcode"></div>
        </div>
      </div>
    </div>
    <div class="footbtm">
      <div class="layer clearfix">
        <div class="contentapp">
          <a class="fr"></a>
        </div>
        <span class="copyright">Copyright © 2018 - flcrotu.cn All Rights Reserved</span>
      </div>
    </div>
  </footer>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {};
  },
  methods: {
    linkApiDoc() {
      window.open(
        "http://www.qtglobal.net/",
        "_blank"
      );
    },
    qrcode() {
        let that = this;
        let qrcode = new QRCode(this.$refs.downqrcode, {
            width: 100,  
            height: 100,
            text: window.location.origin+"/#/h5/download", // 二维码地址
            colorDark : "#000",
            colorLight : "#fff",
        })
    },
  },
  mounted(){
    this.qrcode();
  }
};
</script>

<style lang="less">
.footer {
  width: 100%;
  min-height: 140px;
  background: rgba(16, 16, 50, 1);
  position: absolute;
  bottom: 0;
  background: #111114;
  .foottop {
    border-bottom: 1px solid rgba(168, 173, 202, 0.1);
    padding-bottom: 26px;
    .footlink {
      float: left;
      font-size: 12px;
      color: rgba(153, 153, 212, 1);
      line-height: 100%;
      padding-top: 36px;
      margin-right: 34px;
      color: #d5def2;
      cursor: pointer;
      &:hover {
        color: #C8C8FF;
        color: #2D8DFE;
      }
    }
    .footbtn {
      float: right;
      position: relative;
      padding: 0 10px;
      height: 30px;
      border-radius: 2px;
      border: 1px solid #d5def2;
      line-height: 30px;
      text-align: center;
      margin-left: 12px;
      margin-top: 20px;
      color: #d5def2;
      width: 120px;
      box-sizing: border-box;
      cursor: pointer;
      font-size: 12px;
      &:hover {
        border: 1px solid #2D8DFE;
        color: #2D8DFE;
        .downqrcode{
          display:block;
        }
        .joinus{
          display:block;
        }
        .wechat{
          display:block;
        }
      }
      .joinus{
        display:none;
        padding:14px;
        background:#fff;
        border-radius: 5px;
        width:145px;
        height:120px;
        position: relative;
        top: -200px;
        left: -35%;
        box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);
        &:before{
          content: "";
          width: 100%;
          left: 0;
          position: absolute;
          bottom: -50px;
          height: 50px;
        }
        &:after{
          content:"";
          position:absolute;
          bottom:-6px;
          left:50%;
          margin-left:-5px;
          width:10px;
          height:6px;
          background:url(../assets/images/Triangle1@2x.png) no-repeat center;
        }
        h2{
          font-size:12px;
          font-weight:500;
          font-familyA:"PingFangSC-Medium";
          color:rgba(51,56,94,1);
          line-height:17px;
          text-align:center;
        }
        p{
          font-size:12px;
          font-familyA:"Roboto-Regular";
          font-weight:400;
          color:rgba(51,56,94,1);
          line-height:20px;
        }
      }
      .wechat{
        display:none;
        position:absolute;
        top:-135px;
        left:50%;
        margin-left:-56px;
        height:114px;
        box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);
        &:after{
          content:"";
          position:absolute;
          bottom:-6px;
          left:50%;
          margin-left:-5px;
          width:10px;
          height:6px;
          background:url(../assets/images/Triangle1@2x.png) no-repeat center;
        }
      }
    }
  }
  .footbtm {
    .copyright {
      display: block;
      font-size: 12px;
      font-weight: 400;
      color:#697080;
      line-height: 100%;
      padding: 16px 0 18px;
      text-align: center;
    }
    .contentapp {
      float: right;
      padding-top: 10px;
    }
  }
  .downqrcode{
    position:absolute;
    top:-132px;
    left:-20px;
    padding:7px;
    background:#fff;
    display:none;
    box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);
    &:after{
      content:"";
      position:absolute;
      bottom:-6px;
      left:50%;
      margin-left:-5px;
      width:10px;
      height:6px;
      background:url(../assets/images/Triangle1@2x.png) no-repeat center;
    }
  }
}
</style>
